<template>
  <div class="body">
    <div class="header"></div>
    <div class="rulefix" @click="showPopup">规则</div>
    <div class="mylottery">
      <a href="#/appointment">我的预约</a>
    </div>
    <!-- 规则弹窗 -->
    <van-popup v-model="Fixed" class="boxed">
      <div class="backgrend">
        <h4>活动协议</h4>
        <div class="details">
          <p>一、活动规则：</p>
          <p>1、活动时间：自XXX年X月X日-2021年X月X日止。</p>
          <p>
            2、账号登录后点击活动页中的“预约抽签”按钮，参与抽选，并提交填写报名信息，等待抽签结果通知。
          </p>
          <p>
            3、活动抽中的商品可在“媛福达APP→我的→我的预约”中查看，抽中的用户请在规定时间内完成付款，付款用户7个工作日后按先后顺序发出。
          </p>
          <p>
            4、活动抽中的商品不可抵现，不可转让；严令禁止窜货等扰乱市场的二次交易销售行为。
          </p>
          <p>
            5、如用户使用三大运营商以外的其他运营商和虚拟运营商所运营的手机号码（包括但不限于165、170、711、147等号段开头的手机号码）注册媛福达线上商城用户，均无权参与本次活动。
          </p>
          <p>
            6、活动期间，用户登录媛福达APP手机客户端后，同一个登录账号仅限于在一个固定设备上登录参与本活动。如同一登录账号中途更换登录设备，将无法参与本活动。
          </p>
          <p>
            7、活动期间，同一个登录账号每天仅可参与X次抽签活动，同一个ID当日每场活动累计参与X次；本次活动抽签商品及发放条件由媛福达App商城根据活动需求设定。
          </p>
          <p>8、抽签商品每人限购X件，且不适用于任何优惠券。</p>
          <p>
            9、抽签商品在短信通知后72小时内成功付款。超时订单将被取消。成功付款以媛福达App商城确认付款信息为准，您可通过【我的】查询订单状态实时了解是否已成功付款。
          </p>
          <p>
            10、媛福达App商城对于中签用户，主要通过短信/媛福达App商城（我的预约）的方式告知您是否已经获得购买资格；提交预约抽签报名信息后，请保持您的短信接收状态通畅。
          </p>
          <p>二、活动注意事项：</p>
          <p>
            1、在线成功支付需要多方协同，例如您的付款银行，支付及交易平台等；自您支付后，各方系统需要一定时间进行数据交换直至本次抽签付款确认成功。
          </p>
          <p>
            2、在此期间，一旦发生网络传输延迟或数据交换堵塞可能影响您成功付款，因此建议您中签后尽快在规定时间内付款，以避免网络延迟未能成功付款而导致订单取消的情形出现。
          </p>
          <p>
            3、媛福达App商城在某些情况有下有权单方取消您的订单。如您已付款，媛福达App商城只需通过原付款平台向您退回您已支付款项，且无需承担其他责任。详见用户协议。
          </p>
          <p>
            4、所有商品图片均为官方拍摄，但由于电脑、手机等显示设备在色彩、对比度、亮度上会存在一定差异，您所看到的图片与实物难免会存在差别。
          </p>
          <p>
            5、如超过指定时间未能成功付款，您最终将无法买到该商品，欢迎您下次参与。
          </p>
          <p>
            6、为了保障您的个人信息与财产安全，请您在支付前确认配送信息正确，订单生成之后将无法为您更改配送地址。
          </p>
          <p>
            7、媛福达公司有权在法律法规准许的范围内对本次活动规则作出解释并做适当调整。
          </p>
          <p>
            8、本平台严厉禁止和打击恶意刷活动的行为。参与抽签的过程中，如用户通过任何不正当手段（包括但不限于利用黑客工具、软件作弊等方式恶意操作）参加活动获取权益或者不符合活动规则的行为，媛福达App商城有权在不事先通知的前提下取消该违规用户参与活动的资格和已获得的相应权益。
          </p>
          <p>
            9、参加抽签活动需要遵守相关法律法规，如涉及违反相关规定，一经发现将根据违反程度对违规用户采取相应的处理措施，情节严重者，媛福达App商城将依法追究其法律责任。
          </p>
          <p>
            10、本平台不对因网络传输原因而导致参加者提交的信息错误承担任何责任。
          </p>
          <p>三、活动免责事项及申明：</p>
          <p>
            1、因用户自身主观过错或恶意行为，如不按规定的正常流程参与活动、填写信息不真实、不完整等类似情形致使此次抽签无效、无法核验用户真实信息而不能参与抽签的，媛福达App商城不承担责任。
          </p>
          <p>
            2、任何由于网络问题、黑客攻击、计算机病毒侵入或发作、因政府管制而造成的暂时性关闭等影响网络正常运行的不可抗力而造成的抽签活动无法正常进行或非正常抽签无效，媛福达App商城均得免责。
          </p>
          <p>
            3、用户活动报名时提供的个人信息（含身份信息）仅作为在线登记、验证实名制身份的注册和留存发货信息，不作为营销用途，不披露个人信息，不买卖个人信息。如因发生不可抗拒因素可能引起的个人信息丢失、泄漏等风险，媛福达公司免责。不可抗拒是指不可控制、不可预见或不能避免，即使预见亦无法避免的时间，该事件使任何一方根据本协议履行其全部或部分义务已不可能。包括社会异常时间，自然灾害或政府管制行为而造成的网络关闭等非平台过错的行为。
          </p>
          <p>
            4、抽签期间发生任何不可抗力事件使本次抽签活动或本次抽签目的的不能实现，媛福达公司免责。不可抗力是指不可控制、不可预见或不能避免，即使预见亦无法避免的时间，该事件使任何一方根据本协议履行其全部或部分义务已不可能。包括社会异常时间，自然灾害或政府管制行为而造成的网络关闭等非平台过错的行为。
          </p>
          <p>
            5、参与活动前，请用户详细阅读活动规则及相关条款。凡参与本次活动，则视为用户已知晓并同意遵守活动规则及免责声明条款。
          </p>
        </div>
      </div>
      <div @click="onClose" class="confirm">我已知晓</div>
    </van-popup>
    <!-- 轮播two -->
    <!-- :autoplay="2000" -->
    <van-swipe
      :duration="700"
      :autoplay="5000"
      style="height: 132px"
      :show-indicators="true"
    >
      <van-swipe-item
        v-for="item in lister"
        :key="item.goods_id"
        class="top-ad"
      >
        <ul>
          <li v-for="itemr in item" :key="itemr.goods_id" @click="nav(itemr)">
            <div class="back">
              <img v-lazy="itemr.goods_img" :key="itemr.goods_img" />
            </div>
          </li>
        </ul>
      </van-swipe-item>
    </van-swipe>
    <!-- 热销 -->
    <van-tabs
      animated
      color="rgba(255,255,255,1)"
      background="transparent"
      title-active-color="#fff"
      line-width="80px"
      @click="bigTitleChange"
      style="margin-top: 20px"
      title-inactive-color="rgba(255,255,255,0.6)"
    >
      <van-tab title="今日预约" title-style="font-size:18px">
        <div class="null-box" v-if="showNullToday">
          <div class="images">
            <img src="../../assets/images/lottery/huodong.png" class="img" />
          </div>
        </div>
        <div class="Box" v-else>
          <div class="leftTitDiv">
            <p class="title">热卖中</p>
            <span>不容错过</span>
          </div>
          <van-tabs @click="timeChangeToday" animated>
            <van-tab v-for="item in todayTimeArr" :key="item.time">
              <template #title>
                <div @click="btnTimeArr(item)">
                  <p class="time">
                    {{ item.startTime.slice(11).substring(0, 5) }}
                  </p>
                  <p class="staus" v-if="item.timeStatus == 1">抢购中</p>
                  <p class="staus" v-if="item.timeStatus == 0">即将开始</p>
                </div>
              </template>
              <div class="vanswipe">
                <!-- 今日活动商品 -->
                <ul>
                  <li v-for="item in todayTimeShopList" :key="item.id">
                    <img :src="item.goodsImg" class="imge" alt />
                    <div class="content">
                      <div class="text-Dev">{{ item.goodsName }}</div>
                      <p class="introduce">{{ item.editors }}</p>
                      <!-- <p class="surplus">剩余{{item.surplus}}件</p> -->
                      <p class="surplus"></p>
                      <span class="money-Dev">
                        ¥
                        <span>{{ item.salePrice }}</span>
                      </span>
                      <del class="price">¥{{ item.originPrice }}</del>
                    </div>
                    <div class="event">
                      <!-- status 0未预约_1已预约—— timeStatus 0未到_1已到 -->
                      <van-button
                        class="unscuuessful"
                        v-if="item.status == 1 && item.timeStatus == 1"
                        type="default"
                        >已预约</van-button
                      >
                      <van-button
                        class="success"
                        v-if="item.status == 0 && item.timeStatus == 1"
                        type="default"
                        @click="btnReservation(item)"
                        >立即预约</van-button
                      >
                      <van-button
                        class="success"
                        v-if="item.timeStatus == 0"
                        type="default"
                        style="background: #ffb314"
                        @click="btnDetail(item)"
                        >查看详情</van-button
                      >
                    </div>
                  </li>
                </ul>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </van-tab>
      <van-tab title="明日预告" title-style="font-size:18px">
        <div class="null-box" v-if="showNullTomorrow">
          <div class="images">
            <img src="../../assets/images/lottery/huodong.png" class="img" />
          </div>
        </div>
        <div class="Box" v-else>
          <div class="leftTitDiv">
            <p class="title">热卖中</p>
            <span>不容错过</span>
          </div>
          <van-tabs @click="timeChangeTomorrow" animated>
            <van-tab v-for="item in tomorrowTimeArr" :key="item.time">
              <template #title>
                <div @click="btnTomorrowTime(item)">
                  <p class="time">
                    {{ item.startTime.slice(11).substring(0, 5) }}
                  </p>
                  <p class="staus" v-if="item.timeStatus == 1">抢购中</p>
                  <p class="staus" v-if="item.timeStatus == 0">即将开始</p>
                </div>
              </template>
              <div class="vanswipe">
                <ul>
                  <li v-for="item in tomorrowDatas" :key="item.id">
                    <img :src="item.goodsImg" class="imge" alt />
                    <div class="content">
                      <div class="text-Dev">{{ item.goodsName }}</div>
                      <p class="introduce">{{ item.editors }}</p>
                      <!-- <p class="surplus">剩余{{item.surplus}}件</p> -->
                      <p class="surplus"></p>
                      <span class="money-Dev">
                        ¥
                        <span>{{ item.salePrice }}</span>
                      </span>
                      <del class="price">¥{{ item.originPrice }}</del>
                    </div>
                    <div class="event">
                      <!-- status 0未预约_1已预约—— timeStatus 0未到_1已到 -->
                      <van-button
                        class="unscuuessful"
                        v-if="item.status == 1 && item.timeStatus == 1"
                        type="default"
                        >已预约</van-button
                      >
                      <van-button
                        class="success"
                        v-if="item.status == 0 && item.timeStatus == 1"
                        type="default"
                        >立即预约</van-button
                      >
                      <van-button
                        class="success"
                        v-if="item.timeStatus == 0"
                        type="default"
                        style="background: #ffb314"
                        btnDetail(item)
                        >查看详情</van-button
                      >
                    </div>
                  </li>
                </ul>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 没有活动 -->
    <!-- <div class="null-box">
      <div class="images">
        <img src="../../assets/images/lottery/huodong.png" class="img" />
      </div>
    </div> -->
    <!-- 推荐商品 -->
    <div class="hot-time"></div>
    <img src="../../assets/img/lottery/recommend@2x.png" class="imgEs" />
    <div class="add">
      <ul>
        <li
          v-for="item in shoppingData"
          :key="item.goods_id"
          @click="nav(item)"
        >
          <img :src="item.goods_img" class="img" alt />
          <div class="text-title">{{ item.sell_name }}</div>
          <div class="selling-point">{{ item.simple_desc }}</div>
          <div class="money">
            ¥
            <span class="price-now">{{ item.sale_price }}</span>
            <!-- 商品原价价格 -->
            <!-- <span class="price-old">¥13.9</span> -->
          </div>
        </li>
      </ul>
    </div>

    <!-- <img @click="ping" src="../../assets/img/sun/title4@2x.png" class="images" alt /> -->
    <!-- 微信遮罩 -->
    <div @touchmove.prevent class="rigth" v-if="show">
      <img src="../../assets/img/wei_20210307160153.png" alt />
    </div>
    <!-- 置顶 -->
    <div class="totop" id="totop" @click="backTop" v-show="btnFlag">
      <!-- <i class="iconfont icon-zhiding"></i> -->
    </div>
    <!-- <div class="banner">
      <img
        src="../../assets/img/share/x.png"
        class="imgone"
        alt=""
      >
      <img
        src="../../assets/img/share/yuan.png"
        class="imgtwo"
        alt=""
      >
      <span class="spanone">打开媛福达APP
        <span class="spantwo">购物方便优惠多</span>
      </span>
      <div
        class="btn"
        @click="Gone"
      >下载</div>
      <div
        id="wekupButton"
        class="btn"
      >打开</div>
    </div>-->
  </div>
</template>

<script>
import bridge from "../../js/js1";
import { index } from "@/api/index";
import { share } from "../../js/wechat";
import { getSystem, openApp, getUrlQuery, parseKeyValue } from "@/js/js";
import {
  todayActivityList,
  todayGoodsList,
  tomorrowActivityList,
  tomorrowGoodsList,
} from "@/api/lottery/lottery.js";
// 精选推荐
import { shoppingList } from "@/api/presale/successfully";
import elevenVue from "../Eleven/eleven.vue";

// import Vconsole from "vconsole";
// const vConsole = new Vconsole();
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      num: 0,
      list: [],
      lister: [],
      listdev: [],
      show: false,
      system: getSystem(),
      atr: [],
      atrdev: [],
      listerdev: [],
      share: true,
      scrollTop: 0,
      btnFlag: false,
      showTips: false,
      atrd: [],
      Fixed: false, // 弹窗规则
      todayTimeArr: [], //今日预约时间组
      tomorrowTimeArr: [], //明日预告时间组
      tomorrowDatas: [],
      todayTimeShopList: [],
      shoppingData: [],
      showNullToday: true, // 判断今日是否展示无活动
      showNullTomorrow: true, // 判断明日是否展示无活动
    };
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  created() {
    this.create();
    this.Token();
    this.system = getSystem();
    if (this.system.wechat) this.showTips = true;
    if (!this.system.yfd && !this.system.wechat) {
      if (this.system.iOS9 || this.system.android) {
        ULink([
          {
            id: "usr1anivh5aa8uq6", // 后台生成的裂变活动LinkID
            data: {
              path: "webview",
              webUrl:
                "https://download.yuanfuda933.com/h5/other2.html#/lottery", // 活动地址
              andUrl:
                "https://download.yuanfuda933.com/h5/other2.html#/lottery", // 活动地址
              // extraData: `{id:${this.id},uid:${this.uid}`,
              // extraData: {
              //   id: this.id,
              //   uid: this.uid,
              //   tid: this.tid
              // }
            } /* 自定义参数，选填 */,
            selector: "#wekupButton",
            useOpenInBrowerTips: "default",
            proxyOpenDownload: function (defaultAction, LinkInstance) {
              window.location.href = LinkInstance.solution.downloadUrl;
            },
          },
        ]);
      }
    } else {
      this.getToken((token) => {
        this.$store.commit("setUser", token);
      });
    }
  },
  mounted() {
    this.toph();
    window.addEventListener("scroll", this.scrollToTop);
    share({
      title: "喜迎国庆大放价",
      desc: "媛福达祝祖国生日快乐，新品好物，全场5折起~",
      imgUrl: "https://download.yuanfuda933.com/h5/images/national.png",
      shareUrl: "https://download.yuanfuda933.com/h5/other2.html#/national",
    });
    this.todayActivityListGet();
    this.tomorrowActivityListGet();
    this.shoppingListPost();
  },
  // 组件方法
  methods: {
    // 获取token
    Token() {
      this.getToken((token) => {
        this.$store.commit("getUser", token);
      });
      let that = this;
      const tokened = this.$store.state.gettoken;
      // setTimeout(function () {
      //   this.todayActivityListGet();
      // }, 500);
    },
    getToken(callback) {
      const system = getSystem();
      if (system.android) {
        bridge.dsCall("getToken", "", (res) => {
          if (typeof res === "string") res = JSON.parse(res);
          callback(res);
        });
        return;
      }
      if (system.iOS) {
        bridge.iosReg("myTokenmethd", (res) => {
          const token = parseKeyValue(res);
          // const token = qs.parse(res)
          callback(token);
        });
        bridge.iosCall("getToken", "", (res) => {});
      }
    },
    // GetHot() {
    //   const tokened = this.$store.state.gettoken.token;
    //   if (tokened) {
    //     GetDay({
    //       id: 1
    //     })
    //       .then(res => {
    //         console.log(res);
    //       })
    //       .catch(err => {
    //         console.log("接口出错");
    //         console.log(err);
    //       });
    //   } else {
    //     console.log("失败没有token了");
    //   }
    // },
    // 今日预约活动
    todayActivityListGet() {
      todayActivityList()
        .then((res) => {
          if (res.data.code == 200) {
            this.todayTimeArr = res.data.data;
            // 默认显示的今日活动商品
            this.todayGoodsListGet(res.data.data[0].id);
            if (this.todayTimeArr.length == 0) {
              this.showNullToday = true;
            } else {
              this.showNullToday = false;
            }
          } else {
            console.log("error，获取今日预约的活动——接口请求失败！");
          }
        })
        .catch((err) => {
          console.log("接口出错", err);
        });
    },
    // 获取今日预约活动时间id
    btnTimeArr(item) {
      this.todayGoodsListGet(item.id);
    },
    // 今日预约活动商品
    todayGoodsListGet(id) {
      todayGoodsList(id)
        .then((res) => {
          if (res.data.code == 200) {
            this.todayTimeShopList = res.data.data;
          } else {
            console.log("error，获取今日预约的活动商品——接口请求失败！");
          }
        })
        .catch((err) => {
          console.log("接口出错", err);
        });
    },
    // 获取明日预约的活动
    tomorrowActivityListGet() {
      tomorrowActivityList()
        .then((res) => {
          if (res.data.code == 200) {
            this.tomorrowTimeArr = res.data.data;
            // 默认显示的明日活动商品
            this.tomorrowGoodsListGet(res.data.data[0].id);
            if (this.tomorrowTimeArr.length == 0) {
              this.showNullTomorrow = true;
            } else {
              this.showNullTomorrow = false;
            }
          } else {
            console.log("error，获取明日预约的活动——接口请求失败！");
          }
        })
        .catch((err) => {
          console.log("接口出错", err);
        });
    },
    // 获取明日预约活动时间id
    btnTomorrowTime(item) {
      this.tomorrowGoodsListGet(item.id);
    },
    // 获取明日活动商品
    tomorrowGoodsListGet(id) {
      tomorrowGoodsList(id)
        .then((res) => {
          if (res.data.code == 200) {
            this.tomorrowDatas = res.data.data;
          } else {
            console.log("error，获取明日预约的活动商品——接口请求失败！");
          }
        })
        .catch((err) => {
          console.log("接口出错", err);
        });
    },
    // 精选推荐
    async shoppingListPost() {
      try {
        const res = await shoppingList();
        if (res.data.err_code == 0) {
          this.shoppingData = res.data.data.data;
        } else {
          console.log("精选接口响应错误");
        }
      } catch (err) {
        console.log("精选——接口错误", err);
      }
    },
    // 弹出规则弹窗
    showPopup() {
      this.Fixed = true;
    },
    //关闭抽奖规则弹窗
    onClose() {
      if (this.Fixed == true || this.win == true) this.Fixed = false;
      this.win = false;
    },
    // 大标题切换
    bigTitleChange(index, title) {
      // 点击明日预约
      if (index == "1") {
        // this.tomorrowActivityListGet();
      }
    },

    timeChangeToday(index) {
      console.log("测试今日活动", index);
      //模拟时间未到
      // if (index == "1") {
      //   this.todayTimeArr[index].status = "抢购中";
      // } else {
      // }
    },
    timeChangeTomorrow(index) {
      //模拟时间未到
      // if (index == "1") {
      //   this.tomorrowTimeArr[index].status = "抢购中";
      // } else {
      // }
    },
    toph() {
      if (this.system.wechat) {
        this.show = true;
        return false;
      } else {
        this.show = false;
      }
    },
    Gone() {
      if (this.system.iOS) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
      } else if (this.system.android) {
        window.location.href =
          "https://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk";
      }
    },
    ping() {
      if (this.system.wechat) {
        this.show = true;
        return false;
      } else {
        this.show = false;
      }
      if (!this.system.iOS9 && !this.system.android) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
        return false;
      }
      window.location.href = "yfd://yfdmall:8080/homePage";
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      // console.log(that.scrollTop);
      if (that.scrollTop > 800) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
    // 轮播图
    async create() {
      try {
        const res = await index({
          id: 143,
        });
        console.log("index___", res.data.data.types);
        this.list = res.data.data.types[0].goods.slice(0, 2);
        var atrdev = res.data.data.types[0].goods.slice(2, 20);
        var resultdev = [];
        for (var i = 0; i < atrdev.length; i += 3) {
          resultdev.push(atrdev.slice(i, i + 3));
        }
        this.lister = resultdev;
        this.atr = res.data.data.types[1].goods;
        this.atrdev = res.data.data.types[2].goods;
        this.listdev = res.data.data.types[3].goods;
        this.atrd = res.data.data.types[4].goods;
      } catch (err) {
        console.log("错误");
      }
    },
    // 跳转下载
    nav(item) {
      if (this.system.wechat) {
        this.show = true;
        return false;
      } else {
        this.show = false;
      }
      if (!this.system.iOS9 && !this.system.android) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
        return false;
      }
      if (this.system.android) {
        openApp({
          query: { spuId: item.goods_id },
        });
      }
      if (this.system.iOS)
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
    },
    href(uri, blank = true) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = uri;
      if (blank) a.setAttribute("target", "_blank");
      document.body.appendChild(a);
      a.click();
      setTimeout((t) => {
        document.body.removeChild(a);
      }, 0);
    },
    // 立即预约
    btnReservation(item) {
      const tokened = this.$store.state.gettoken.token;
      const system = getSystem();
      if (tokened) {
        // goodsId_传到详情的id  id_传到预约登记activityGoodsId的活动id
        this.$router.push({
          path: "/productDetails",
          query: {
            goodsId: item.goodsId,
            id: item.id,
          },
        });
      } else {
        // this.$toast("请先登录！");
        // return false;
        if (system.android) {
          console.log("and 登录");
          bridge.dsCall("h5Login", "", (e) => {
            callback(e);
          });
        }
        if (system.iOS) {
          console.log("ios 登录");
          bridge.iosCall("h5Login", "", (e) => {
            callback(e);
          });
        }
      }
    },
    // 点击查看详情跳转
    btnDetail(item) {
      console.log("item", item);
      this.href = "yfd://yfdmall:8080/goodsDetail?spuId=" + `${item.id}`;
    },
  },
};
</script>

<style scoped lang="less">
.body {
  overflow: hidden;
  min-width: 4.26667rem;
  max-width: 10rem;
  background: #be434b;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  .header {
    background: url("../../assets/img/lottery/header@2x.png") no-repeat;
    background-size: contain;
    width: 10rem;
    height: 5.2rem;
  }
  // 固定规则
  .rulefix {
    position: fixed;
    right: 0;
    top: 2.34667rem;
    /* // width: 76px; */
    height: 0.50667rem;
    background: #ffffff;
    border-radius: 0.37333rem 0 0 0.37333rem;
    opacity: 0.65;
    padding-left: 0.29333rem;
    padding-right: 0.08rem;
    z-index: 11;
    font-size: 0.16rem;
    /* // font-family: SourceHanSansCN-Normal, SourceHanSansCN; */
    font-weight: 400;
    color: #282828;
  }
  /* //  我的预约按钮 */
  .mylottery {
    position: fixed;
    right: 0;
    top: 3.22667rem;
    /* // width: 118px; */
    height: 0.50667rem;
    padding-left: 0.21333rem;
    padding-right: 0.08rem;
    background: #ffffff;
    border-radius: 0.37333rem 0 0 0.37333rem;
    opacity: 0.65;
    z-index: 11;
    font-size: 0.16rem;
    /* // font-family: SourceHanSansCN-Normal, SourceHanSansCN; */
    font-weight: 400;
    color: #282828;
  }
  //轮播
  .van-swipe {
    width: 9.6rem;
    margin-left: 0.26rem;
    overflow: hidden;
    /deep/ .van-swipe__indicator {
      width: 7px;
      height: 3px;
      border-radius: 2px;
    }
    /deep/ .van-swipe__indicator--active {
      background-color: #ff301e;
    }
  }
  .van-swipe-item {
    li:nth-child(2) {
      /* // margin: 0 0.36rem; */
    }
    ul li {
      box-shadow: 0 0.02rem 0.0016667rem 0.0016667rem #e7e7e7;
      float: left;
      width: 9.46667rem;
      height: 3.52rem;
      overflow: hidden;
      background: #ffffff;
      margin-bottom: 0.266667rem;
      border-radius: 0.266667rem;
      .back {
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-color: #f8f8f7;
        border-radius: 0.266667rem;
        .one-hit {
          display: block;
          margin: 0.296667rem auto;
          width: 2.3rem;
          height: 2.3rem;
        }
      }
    }
  }

  .totop {
    position: fixed;
    width: 1.2rem; /* 40/16 */
    height: 1.2rem;
    border-radius: 1.25rem /* 20/16 */;
    opacity: 0.8;
    background: url("../../assets/ding.png") no-repeat;
    background-size: contain;
    box-shadow: 0 1px 5px 0 #e0e0e0;
    right: 0.125rem; /* 18/16 */
    bottom: 3rem; /* 64/16 */
    z-index: 1100;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .banner {
    z-index: 99;
    position: fixed;
    top: 0%;
    width: 10rem;
    height: 2.28rem;
    background: #000000;
    display: flex;
    .imgone {
      display: block;
      margin: auto 0.293333rem;
      width: 0.586667rem;
      height: 0.586667rem;
    }
    .imgtwo {
      display: block;
      margin: auto 0.266667rem;
      width: 1.28rem;
      height: 1.28rem;
    }
    .spanone {
      margin: auto 0.066667rem;
      width: 3.2rem;
      height: 1.453333rem;
      font-size: 0.426667rem;
      color: #ffffff;
      .spantwo {
        font-size: 0.32rem;
        font-size: #9b9b9b;
        color: #9b9b9b;
      }
    }
    .btn {
      width: 1.633333rem;
      height: 0.906667rem;
      background: #ea0462;
      border-radius: 0.133333rem;
      font-size: 0.426667rem;
      color: #ffffff;
      text-align: center;
      line-height: 0.906667rem;
      margin: auto 0.1rem;
    }
  }
  // 弹出层
  .boxed {
    width: 8.56rem;
    box-sizing: border-box;
    background-size: contain;
    border-radius: 0.29333rem;
    overflow: hidden;
    .backgrend {
      h4 {
        text-align: center;
        font-weight: 700;
        color: #000000;
        font-size: 0.42667rem;
        line-height: 0.32rem;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      }
      .details {
        color: #343434;
        line-height: 0.50667rem;
        font-weight: 400;
        font-size: 0.16rem;
        margin: 0.2rem 0.21333rem 0.2rem 0.69333rem;
        overflow: auto;
        height: 7.33333rem;
        padding-right: 0.66667rem;
      }
    }
    .confirm {
      margin: 0.66667rem auto 0.8rem;
      width: 3.12rem;
      height: 1.06667rem;
      line-height: 1.06667rem;
      background: linear-gradient(180deg, #ff488b 0%, #ff005e 100%);
      border-radius: 0.58667rem;
      color: #ffffff;
      font-size: 0.42667rem;
      text-align: center;
    }
  }
  //   精品推荐
  .imgEs {
    width: 10rem;
    height: 1.173333rem;
    margin: 0.5rem auto;
  }
  .add {
    width: 9.466667rem;
    overflow: hidden;
    padding-top: 0.4rem;
    padding-left: 0.206667rem;
    ul li {
      float: left;
      width: 4.56rem;
      height: 6.64rem;
      border-radius: 0.166667rem;
      background: #ffffff;
      margin-bottom: 0.133333rem;
      margin-left: 0.166667rem;
      .img {
        width: 3.493333rem;
        height: 3.173333rem;
        margin-top: 0.24rem;
        margin-left: 0.53333rem;
      }
      .text-title {
        margin: 0.13333rem 1.12rem 0 0.34667rem;
        width: 3.093333rem;
        height: 1.033333rem;
        font-weight: bold;
        font-size: 0.37333rem;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .selling-point {
        margin: 0.2rem 0.53333rem 0 0.34667rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 3.46667rem;
        height: 0.4rem;
        font-size: 0.32rem;
        font-weight: 400;
        color: #8a8a8a;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      }
      .money {
        margin-top: 0.4rem;
        margin-left: 0.34667rem;
        /* // width: 1.333333rem;
        // height: 0.426667rem; */
        font-size: 0.18667rem;
        line-height: 0.28rem;
        color: #ff301e;
        font-weight: 700;
        .price-now {
          margin-right: 0.33333rem;
          font-size: 0.42667rem;
          line-height: 0.56rem;
        }
        .price-old {
          margin-left: 0.10667rem;
          vertical-align: baseline;
          text-decoration: line-through;
          line-height: 0.26667rem;
          font-family: PingFangSC-Regular;
          font-size: 0.18667rem;
          color: #9b9b9b;
        }
      }
    }
  }
  .rigth {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 10rem;
    height: 30rem;
    background-color: #1e1e1e;
    opacity: 0.8;
  }
  .rigth img {
    width: 8rem;
    height: 4.4rem;
    float: right;
  }

  /* // tab栏 */
  .van-tabs--card /deep/ .van-tabs__wrap {
    height: 1.253333rem;
    /* // border: 0.133333rem solid #f9cf8b; */
    border-radius: 0.266667rem;
    margin-top: 0.533333rem;
    background: #fedaac;
    /* // 状态栏 */
    .van-tabs__nav--card {
      border: 0;
      height: 1.053333rem;
      /* // 每一格 */
      .van-tab {
        border-right: 0;
        margin-top: 0.1266667rem;
      }
      /* // 选中格 */
      .van-tab.van-tab--active {
        border-radius: 0.6rem;
        border: 0;
        .van-tab__text--ellipsis {
          font-weight: 600;
        }
      }
    }
  }
  .van-tab__pane-wrapper {
    .Box {
      width: 9.466667rem;
      // background: #ffffff;
      border-radius: 0.166667rem;
      margin: 0.266667rem auto;
      overflow: hidden;
      padding-top: 0.4rem;
      .leftTitDiv {
        position: absolute;
        z-index: 999;
        top: 0.63415rem;
        width: 2.82927rem;
        padding-left: 0.2439rem;
        display: inline-block;
        p.title {
          height: 0.53659rem;
          width: 77%;
          background: url("../../assets/images/lottery/hot@3x.png") no-repeat;
          background-size: contain;
          padding-left: 0.63415rem;
          font-size: 0.53659rem;
          line-height: 0.53659rem;
          color: #343434;
          font-weight: bold;
        }
        span {
          color: #7f7f7f;
          font-size: 16px;
          position: absolute;
          left: 0.73171rem;
          top: 54px;
        }
      }
      /deep/ .van-tabs--line .van-tabs__wrap {
        height: 2.43902rem;
        border-radius: 0.29268rem;
      }
      /deep/ .van-tabs__nav.van-tabs__nav--line {
        padding-left: 2.92683rem;
        padding-right: 0.29268rem;
      }
      /deep/ .van-tab__text.van-tab__text--ellipsis {
        font-size: 0.4878rem;
        display: inline-block;
        p {
          margin: 0;
        }
        p.time {
          margin-bottom: 10px;
        }
        p.staus {
          font-size: 15px;
        }
      }
      /deep/ .van-tab--active {
        color: #ff4304;
      }
      /deep/ .van-tab--active p.staus {
        background-color: #ff4304;
        color: #fff;
        border-radius: 20px;
        padding: 0px 8px;
      }
      /deep/ .van-tab--active p.time {
        padding: 0 3px;
      }
      /deep/ .van-tabs__line {
        display: none;
      }
      .vanswipe {
        width: 9.6rem;
        ul {
          margin-top: 12px;
        }
        ul li {
          position: relative;
          overflow: hidden;
          width: 9.493333rem;
          height: 3.65333rem;
          border-radius: 0.266667rem;
          background-color: #fff;
          margin-bottom: 0.266667rem;
          .imge {
            width: 106px;
            height: 106px;
            background: #dddddd;
            margin-top: 0.4rem;
            vertical-align: top;
            margin-left: 0.13333rem;
            border-radius: 0.166667rem;
          }
          .content {
            display: inline-block;
            margin-left: 0.21333rem;
            width: 4rem;
            .text-Dev {
              margin-top: 0.32rem;
              color: #000000;
              width: 100%;
              font-size: 0.426667rem;
              font-weight: 700;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .introduce {
              margin: 0;
              margin-top: 0.05333rem;
              font-size: 0.32rem;
              color: #8a8a8a;
              overflow: hidden;
              line-height: 0.4rem;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .surplus {
              font-size: 0.32rem;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              color: #000000;
              height: 2px;
              line-height: 0.21333rem;
            }
            .money-Dev {
              font-size: 0.426667rem;
              // font-weight: 600;
              color: #ff301e;
              span {
                font-size: 0.533333rem;
              }
            }
            .price {
              font-size: 0.4rem;
              margin-left: 0.16rem;
              // font-weight: 600;
              color: #9c9c9c;
            }
          }
          .event {
            display: inline-block;
            width: 2.13333rem;
            margin-top: 92px;
            float: right;
            margin-right: 0.16rem;
            button {
              padding: 0 0.10667rem;
              width: 100%;
              border-radius: 8px;
              color: #fff;
              height: 0.8rem;
              font-size: 16px;
              margin-bottom: 0.53333rem;
            }
            .unscuuessful {
              background: linear-gradient(180deg, #ebebeb 0%, #c3c3c3 100%);
            }
            .success {
              background: linear-gradient(180deg, #ff4500 0%, #ff8514 100%);
            }
            .detail {
              font-size: 0.32rem;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              color: #393939;
              line-height: 0.24rem;
            }
          }
        }
        .Boxs {
          width: 9.6rem;
          height: 4rem;
          background: #e7e7e7;
          .balabce {
            width: 9.6rem;
            height: 4rem;
            background: #f5f6f7;
            margin: 0 auto;
          }
        }
      }
    }
  }
  @keyframes mymove {
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.1); /*放大1.1倍*/
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.1);
    }
  }
  @-webkit-keyframes mymove /*Safari and Chrome*/ {
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.1); /*放大1.1倍*/
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.1);
    }
  }
}
.null-box {
  background: #be434b;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 100px;
  .images {
    width: 174px;
    height: 160px;
    margin: 0 auto;
    padding-top: 69px;
    .img {
      width: 174px;
      height: 160px;
    }
  }
}
</style>
